<template>
  <div>
    <meta name="format-detection" content="telephone=yes" />

    <div>
      <van-nav-bar title="精品汇-厂家精品汇聚平台" left-text="返回" @click-left="onClickLeft" left-arrow />
    </div>

    <div class="container">
      <div class="rownr">
        <div class="img">
          <van-image round width="40px" height="40px"
            :src="shareInfo.logo ? shareInfo.logo : 'https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/touxiang.png'" />
        </div>
        <div class="columnr">
          <div class="name">{{ shareInfo.agencyname ? shareInfo.agencyname : shareInfo.companyName }}</div>
          <div style="padding-left: 12px;color: #B2B2B2;font-size: 12px;">
            {{ shareInfo.fbsj }}
          </div>
        </div>
      </div>

      <div class="content">
        <p>
          {{ shareInfo.content }}
        </p>
      </div>

      <div class="columnr">
        <div class="viewimg" v-for="img in shareInfo.images">
          <van-image width="90%" height="200" :src="img" />
        </div>
      </div>

      <div style="padding-top: 20px;padding-left: 20px;">
        <div class="rownr">
          <van-icon name="eye-o" />
          <div style="padding-left: 10px; font-size: 12px;">阅 {{ shareInfo.readnum }}</div>
        </div>
      </div>
    </div>

    <div class="liuyan">
      <div class="title_bg">
        <div class="title_sx" />
        <div class="title_name">留言</div>
      </div>

      <div v-for="item in lylist" :key="lyid" style="padding-bottom: 10px;">
        <div class="rownr">
          <div class="img">
            <van-image round width="40px" height="40px" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          </div>
          <div class="columnr">
            <div style="font-size: 16px;padding-left: 10px;padding-top: 10px; color: #466BAC;">
              {{ item.agencyname ? item.agencyname : item.companyname }}</div>
            <div style="padding-left: 12px;padding-top:5px;color: #B2B2B2;font-size: 12px;">
              {{ item.lysj }}
            </div>
          </div>
        </div>

        <div class="hfcontent" @click="doHuifu(item)">
          {{ item.lynr }}
        </div>

        <div class="hfcss" v-for="item1 in item.lyhflist" @click="doHuifu1(item1)">
          <label style="color: #466BAC">{{ item1.fromname }}</label> 回复 <label
            style="color: #466BAC">{{ item1.toname }}</label> ： {{ item1.hfnr }}
        </div>
      </div>
    </div>

    <div class="lyban">
      <div class="rownr">
        <div @click="doshowlyb" style="width: 70%">
          <input type="text" placeholder="写留言" class="lytextcss" />
        </div>

        <div style="width: 10%;align-content: center;padding-left: 5%;font-size: 14px;padding-top: 15px;"
          @click="doShouCang(shareInfo)">
          <van-icon name="star-o" :color="shareInfo.scyxbz == '1' ? '#FFB929' : ''" size="20" />
        </div>
        <div style="width: 10%;align-content: center;padding-left: 5%;font-size: 14px;padding-top: 15px;"
          @click="callPhone('4008001556')">
          <van-icon name="phone-o" size="20" />
        </div>
        <div style="width: 10%;align-content: center;padding-left: 5%;font-size: 14px;padding-top: 15px;"
          @click="doDianZan(shareInfo)">
          <van-icon name="good-job-o" :color="shareInfo.dzyxbz == '1' ? '#FFB929' : ''" size="20" />
        </div>
      </div>
    </div>

    <van-popup v-model="showlybtn" position="bottom" :style="{ height: '30%' }">
      <div class="textareacss">
        <van-field v-model="lynr" type="textarea" rows="3" center clearable label="" border autofocus="true"
          :placeholder="hfts">
          <template #button>
            <van-button size="small" type="primary" @click="saveLy">留言</van-button>
          </template>
        </van-field>
      </div>
    </van-popup>

  </div>
</template>

<script>
import { addLyhfinfo, addShareLy, addShareStoreInfo, queryAgencyinfo, queryShareInfo, queryShareLy } from 'api/api'
import { Toast } from 'vant'
export default {
  name: 'Search',
  data() {
    return {
      actions: [{ name: '找产品', id: '1' }, { name: '招代理商', id: '2' }],
      fblxname: '请选择发布类型',
      fblx: '',
      showfblx: false,
      placeholder: '请输入要发布的内容',
      content: '',
      fileListfj: [],
      show: false,
      phone: '',
      sjherrormsg: '',
      mzsmflag: '',
      qybtnflag: true,
      checked: false,
      xcxopenid: '',
      loading: true,
      showspdl: false,
      spdlname: '请选择所属商品大类',
      spdldata: [],
      showlybtn: false,
      shareid: '',
      shareInfo: {},
      lynr: '',
      lylist: [],
      pageNum: 1,
      pageSize: 10,
      hfts: '写留言',
      toagencyid: '',
      lyid: '',
      toname: '',
      fromname: ''
    }
  },
  created() {
    const agencyIdStore = this.$store.getters.agencyId
    this.agencyid = agencyIdStore
    debugger
    let shareid = this.$route.query.shareid
    this.shareid = shareid
    this.queryDetailInfo()
    this.queryShareLy()
    this.queryAgencyinfo()
    window.onscroll = function () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //写后台加载数据的函数
        this.pageSize = this.pageSize + 1

      }
    }
  },
  methods: {
    toFabu() {
      this.$router.push({ path: '/fabu', query: {} })
    },
    onClickLeft() {
      this.$router.go(-1) // 返回上一层
    },
    doshowlyb() {
      this.showlybtn = true
      this.hfts = '请填写留言'
      this.lynr = ''
      this.toagencyid = ''
    },
    queryDetailInfo() {
      const param = { shareid: this.shareid }
      const list = []
      queryShareInfo(param).then(res => {
        if (res.code == 200) {
          if (res.rows) {
            let lenth = res.rows.length
            for (var i = 0; i < lenth; i++) {
              if (res.rows[i].images) {
                res.rows[i].images = res.rows[i].images.split(',');
              }
              res.rows[i].fbsj = res.rows[i].fbsj.replace('T', ' ').replace('.000+0800', ' ')
              list.push(res.rows[i])
            }
          }
          this.shareInfo = list[0]
        }
      })
    },

    saveLy() {
      debugger
      let that = this
      let toagencyid = that.toagencyid
      if (toagencyid) {
        let param = { shareid: that.shareid, fromagencyid: that.agencyid, hfnr: that.lynr, lyid: that.lyid, toagencyid: toagencyid, toname: that.toname, hfrbz: '1', fromname: that.fromname }
        addLyhfinfo(param).then(res => {
          if (res.code == 200) {
            Toast.success('留言成功')
            that.showlybtn = false
            that.queryShareLy()
          }
        })
      } else {
        let param = { shareid: that.shareid, agencyid: that.agencyid, lynr: that.lynr }
        addShareLy(param).then(res => {
          if (res.code == 200) {
            Toast.success('留言成功')
            that.showlybtn = false
            that.queryShareLy()
          }
        })
      }
    },

    queryShareLy() {
      let that = this
      let param = { shareid: that.shareid, pageNum: that.pageNum, pageSize: that.pageSize }
      let list = []
      queryShareLy(param).then(res => {
        if (res.code == 200) {
          if (res.rows) {
            let lenth = res.rows.length
            for (var i = 0; i < lenth; i++) {
              if (res.rows[i].lysj) {
                res.rows[i].lysj = res.rows[i].lysj.replace('T', ' ').replace('.000+0800', ' ')
              }
              list.push(res.rows[i])
            }
          }
          this.lylist = that.pageNum == 1 ? list : that.lylist.concat(list)
          console.log('留言列表')
          console.log(this.lylist)
        }
      })
    },

    doShouCang(item) {
      let agencyid = this.agencyid
      let shareid = item.shareid
      if (item.scyxbz == '1') {
        item.scyxbz = '0'
        let param = { agencyid: agencyid, shareid: shareid, scyxbz: '0' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
            Toast.success('取消收藏')
          }
        })
      } else {
        item.scyxbz = '1'
        let param = { agencyid: agencyid, shareid: shareid, scyxbz: '1' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
            Toast.success('收藏成功')
          }
        })
      }

    },

    doDianZan(item) {
      let agencyid = this.agencyid
      let shareid = item.shareid

      if (item.dzyxbz == '1') {
        item.dzyxbz = '0'
        let param = { agencyid: agencyid, shareid: shareid, dzyxbz: '0' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
          }
        })
      } else {
        item.dzyxbz = '1'
        let param = { agencyid: agencyid, shareid: shareid, dzyxbz: '1' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
          }
        })
      }
    },
    callPhone(phoneNumber) {
      window.location.href = 'tel:' + phoneNumber
    },

    doHuifu(item) {
      this.lynr = ''
      this.showlybtn = true
      let hfmb = item.agencyname ? item.agencyname : item.companyname
      let toagencyid = item.agencyid ? item.agencyid : item.companyid
      let lyid = item.lyid
      this.lyid = lyid
      console.log('回复给：' + toagencyid)
      this.hfts = '回复：' + hfmb
      this.toagencyid = toagencyid
      this.toname = hfmb

    },

    doHuifu1(item) {
      this.lynr = ''
      this.showlybtn = true
      let hfmb = item.fromname
      let toagencyid = item.fromagencyid
      let lyid = item.lyid
      this.lyid = lyid
      console.log('回复给：' + toagencyid)
      this.hfts = '回复：' + hfmb
      this.toagencyid = toagencyid
      this.toname = hfmb
    },

    queryAgencyinfo() {

      let param = { agencyid: this.agencyid }
      let that = this
      queryAgencyinfo(param).then(res => {
        if (res.code == 200) {
          console.log(res)
          that.agencyInfo = res.data
          if (res.data) {
            that.fromname = res.data.agencyName
          }
        }
      })
    },

  },

}
</script>

<style scoped>
.container {
  background-color: white;
}

.liuyan {
  background-color: white;
  margin-top: 20px;
  padding-bottom: 60px;
}

.columnr {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.rownr {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.name {
  padding-top: 10px;
  padding-left: 10px;
  font-size: 20px;
  color: #466BAC;
}

.img {
  padding-top: 10px;
  padding-left: 10px;
}

.content {
  font-size: 16px;
  padding: 10px;
  text-indent: 2em;
}

.viewimg {
  width: 90%;
  padding-top: 10px;
  padding-left: 5%;
  padding-right: 4%;
}

.title_bg {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 10px
}

.title_sx {
  height: 20px;
  width: 3px;
  background-color: #f50;
}

.title_name {
  color: #333333;
  font-size: 20px;
  margin-left: 5px;
  font-weight: bold;
}

.hfcontent {
  padding-top: 10px;
  padding-left: 60px;
  font-size: 16px;
}

.lyban {
  width: 99%;
  position: fixed;
  bottom: 0;
  height: 50px;
  background-color: #ffffff;
  border-top: 1px solid #B2B2B2;
}

.lytextcss {
  margin-top: 8px;
  margin-left: 10px;
  border-radius: 15px;
  border: 1px solid #B2B2B2;
  width: 90%;
  height: 30px;
}

.textareacss {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  border: 1px solid #B2B2B2;
}

.hfcss {
  padding-left: 60px;
  padding-top: 10px;
  font-size: 16px;
}
</style>
